<template>
  <div class="zlcTabs" :style="{'--count': $props.datas.length}">
      <div :class="['item', checked == index ? 'on' : 'off']" v-for="(item,index) in $props.datas" :key="index" @click="select(item, index)">
          <i>
              {{ item.name }}
          </i>
      </div>
  </div>
</template>

<script>
import { ref } from "vue"
export default {
    name: "zlcTabs",
    props:{
        datas:{
            type: Array,
            default(){
                return []
            }
        }
    },
    setup(props, ctx){
        let checked = ref(0)
      let select = (item, index) => {
          checked.value = index

          ctx.emit("select", item, index)
      }

      return {
            checked,
          select,
      }
    }
}
</script>

<style scoped lang="less">
.zlcTabs{
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--count),1fr);
  border-width: 1px 0 1px 1px;
  border-style: solid;
  border-color: #50B3FF;
  font-size: 16px;
  line-height: initial;
  .item{
    border-right: 1px solid #50B3FF;
    text-align: center;
    cursor: pointer;
    font-style: oblique;
    &.on{
      color: #fff;
      font-weight: bold;
      background: rgba(9, 108, 222, .5);
    }
    &.off{
      color: #AEC3DC;
      background: rgba(54, 127, 235, .2);
    }
  }
}
</style>
